<template>
  <Echart id="leftCenter" v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="240px" />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';

export default {
  props: {
    chooseType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      options: {},
      countUserNumData: {
        axisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        seriesData: [4984, 4272, 442, 4735, 4775, 4691, 4852, 4882, 4851, 4895, 4876, 4692],
      },
      pageflag: true,
      timer: null,
    };
  },
  watch: {
    chooseType: {
      handler(val, oldVal) {
        console.log("🚀 ~ handler ~ val:", val)
        if (val === 0) {
          this.countUserNumData.seriesData = [4984, 4272, 442, 4735, 4775, 4691, 4852, 4882, 4851, 4895, 4876, 4692];
        } else if (val === 1) {
          this.countUserNumData.seriesData = [841, 734, 772, 777, 836, 801, 810, 861, 833, 806, 829, 856];
        } else if (val === 2) {
          this.countUserNumData.seriesData = [2403, 2082, 2196, 2211, 2388, 2283, 2310, 2463, 2379, 2298, 2367, 2448];
        } else if (val === 3) {
          this.countUserNumData.seriesData = [4.8, 3.1, 3.6, 3.8, 4, 4.1, 4.2, 4.5, 4.6, 4.2, 4.3, 4.7];
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init(this.countUserNumData);
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData) {
      let axisData = currentData.axisData;
      let seriesData = [[...currentData.seriesData]];

      const options = {
        grid: {
          top: '10%',
          left: '4%',
          right: '4%',
          bottom: '4%',
          containLabel: true,
        },
        legend: {
          show: false,
          top: '1%',
          left: '4%',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          // itemGap: 60,
          textStyle: legend.textStyle,
          data: ['运输成本'],
        },
        xAxis: {
          type: 'category',
          data: axisData,
          boundaryGap: false,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            max: 100,
            min: 20, //
            interval: 20,
            axisLabel: yAxis.axisLabel,
            axisLine: {
              show: false,
              // interval: 1,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            splitLine: {
              show: true,
              // interval: 1,
              lineStyle: {
                color: ['rgba(176, 215, 255, 0.2)'],
                width: 1,
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [],
      };
      const series = [
        {
          name: '运输成本',
          type: 'line',
          smooth: true,
          showSymbol: true,
          // symbol: 'circle',
          // symbolSize: 6,
          data: seriesData[0],
          itemStyle: {
            normal: {
              color: '#287CE8',
              // color: 'rgba(0,219,254, .7)',
            },
          },
          areaStyle: {
            color: colorsB[1],
          },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          label: {
            show: false,
            position: 'top',
            formatter: (par) => {
              return par.value + ['万', '万吨', '万方', '亿元', '亿元'][this.chooseType];
            },
            textStyle: { fontSize: 12, color: '#287CE8' },
          },
          markPoint: {
            symbol: 'circle',
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#287CE8',
              formatter: (par) => {
                return par.value + ['万', '万吨', '万方', '亿元', '亿元'][this.chooseType];
              },
            },
          },
        },
      ];
      options.series = series;
      this.options = options;
    },
  },
};
</script>
<style lang="scss" scoped></style>
